<script setup lang="ts">
import logicDrawer from '@/components/logic-drawer/index.vue'
import { ContentEnum } from '@/components/logic-drawer/logic-drawer';
const logicDrawerRef = ref<InstanceType<typeof logicDrawer>>()
const openTable1 = () => {
    logicDrawerRef.value?.open({ title: 'Table-1', content: ContentEnum.TABLE1 })
}
const openTable2 = () => {
    logicDrawerRef.value?.open({ title: 'Table-2', content: ContentEnum.TABLE2 })
}
const openTable3 = () => {
    logicDrawerRef.value?.open({ title: 'Table-3', content: ContentEnum.TABLE3 })
}

</script>
<template>
    <div class="w-full h-full">
        <div class="w-full pl-60px pr-60px pt-100px flex flex-row justify-between">
            <range-item @click="openTable1">
                <template #header>
                    <div class="w-full h-full bg-[#67C23A] text-white">Table1</div>
                </template>
                <template #body>
                    <div class="w-full h-full">
                        nothing...
                    </div>
                </template>
            </range-item>
            <range-item @click="openTable2">
                <template #header>
                    <div class="w-full h-full bg-[#67C23A] text-white">Table2</div>
                </template>
                <template #body>
                    <div class="w-full h-full">
                        action支持slot
                    </div>
                </template>
            </range-item>
            <range-item @click="openTable3">
                <template #header>
                    <div class="w-full h-full bg-[#67C23A] text-white">Table3</div>
                </template>
                <template #body>
                    <div class="w-full h-full">
                        渲染数据列支持slot
                    </div>
                </template>
            </range-item>
            <range-item />
        </div>
        <logic-drawer ref="logicDrawerRef" />
    </div>
</template>